<template>
  <div class="dataBoard_content">
    <div class="dataBoard_header flex">
      <daraBoardLint class="flex-1 mr-15" />
      <daraBoardStreetAnalysis class="flex-3" />
    </div>
    <div class="dataBoard_main grid mt-10">
      <daraBoardMainItemOne
        class="item"
        :assetStatisticsObj="assetStatisticsObj"
      />
      <daraBoardMainItemTwo
        class="item"
        :assetStatisticsObj="assetStatisticsObj"
      />
      <daraBoardMainItemThree
        class="item"
        :assetStatisticsObj="assetStatisticsObj"
      />
      <daraBoardMainItemFour
        class="item"
        :assetStatisticsObj="assetStatisticsObj"
      />
      <daraBoardMainItemFive
        class="item"
        :assetStatisticsObj="assetStatisticsObj"
      />
    </div>
    <div class="dataBoard_footer mt-10">
      <daraBoardFooterAnalysis />
    </div>
  </div>
</template>
<script lang="ts" setup>
import {
  ref,
  computed,
  watch,
  onMounted,
  onBeforeUnmount,
  reactive,
  shallowRef,
} from "vue";
import { assetStatisticsApi } from "@/api/dataBoard";
import { useStore } from "vuex";
import * as echarts from "echarts";
import daraBoardLint from "./components/dataBoard-header/daraBoardLint.vue";
import daraBoardStreetAnalysis from "./components/dataBoard-header/daraBoardStreetAnalysis.vue";
import daraBoardMainItemOne from "./components/dataBoard-main/daraBoardMainItemOne.vue";
import daraBoardMainItemTwo from "./components/dataBoard-main/daraBoardMainItemTwo.vue";
import daraBoardMainItemThree from "./components/dataBoard-main/daraBoardMainItemThree.vue";
import daraBoardMainItemFour from "./components/dataBoard-main/daraBoardMainItemFour.vue";
import daraBoardMainItemFive from "./components/dataBoard-main/daraBoardMainItemFive.vue";
import daraBoardFooterAnalysis from "./components/dataBoard-footer/daraBoardFooterAnalysis.vue";
const store = useStore();

const props = defineProps<{}>();
let assetStatisticsObj = ref({});
const timeType = computed(() => store.state.timeType); // 右上角的时间选择
watch(
  timeType,
  () => { 
    init();
  },
  {
    immediate: true,
  }
);
onMounted(() => { 
});
function init() {
  getAssetStatistics();
}
async function getAssetStatistics() {
  assetStatisticsObj.value = {};
  const res = await assetStatisticsApi({});
  if (res.status != 200) return;
  assetStatisticsObj.value = res.data.result;
}
onBeforeUnmount(() => {});
</script>

<style lang="scss" scoped>
.dataBoard_content {
  width: 100%;
  padding: 10px;

  .dataBoard_header {
    width: 100%;
  }

  .dataBoard_main {
    width: 100%;
    // height: 140px;
    grid-template-columns: 1.3fr 1.3fr 1.2fr 0.9fr 0.9fr;
    grid-gap: 10px;

    .item {
      width: 100%;
      height: 100%;
    }
  }

  .dataBoard_footer {
    width: 100%;
  }
}
</style>